<template>
    <div class="main">
        <van-tabs type="card">
            <van-tab title="机票/酒店">
                <van-tabs v-model="activeq">
                    <van-tab title="单程">
                        <div class="lucheng">
                            <span>北京</span><van-icon class-prefix="icon" name="danxiang"></van-icon><span>到达城市</span>
                        </div>
                        <div class="lucheng">
                            <span>出发日期</span><span>返回日期</span>
                        </div>
                        <div>2成人0儿童</div>
                        <van-button round type="info" size="large">查询</van-button>
                    </van-tab>
                    <van-tab title="往返">
                        <div class="lucheng">
                            <span>北京</span><van-icon class-prefix="icon" name="shuangxiang"></van-icon><span>到达城市</span>
                        </div>
                        <div class="lucheng">
                            <span>出发日期</span><span>返回日期</span>
                        </div>
                        <div>2成人0儿童</div>
                        <van-button round type="info" size="large">查询</van-button>
                    </van-tab>
                    <van-tab title="多程">
                        <div class="lucheng">
                            <span>北京</span><van-icon class-prefix="icon" name="danxiang"></van-icon><span>目的地</span>
                        </div>
                        <div class="lucheng">
                            <span>出发日期</span>
                        </div>
                        <div>
                            <van-button icon="add-o" type="default" size="large" round plain>添加一程</van-button>
                        </div>
                        <div>2成人0儿童</div>
                        <van-button round type="info" size="large">查询</van-button>
                    </van-tab>

                </van-tabs>
            </van-tab>
            <van-tab title="火车/酒店"><van-tabs v-model="activew">
                    <van-tab title="单程">
                        <div class="lucheng">
                            <span>北京</span><van-icon class-prefix="icon" name="danxiang"></van-icon><span>到达城市</span>
                        </div>
                        <div class="lucheng">
                            <span>出发日期</span><span>返回日期</span>
                        </div>
                        <div>2成人0儿童</div>
                        <van-button round type="info" size="large">查询</van-button>
                    </van-tab>
                    <van-tab title="往返">
                        <div class="lucheng">
                            <span>北京</span><van-icon class-prefix="icon" name="shuangxiang"></van-icon><span>到达城市</span>
                        </div>
                        <div class="lucheng">
                            <span>出发日期</span><span>返回日期</span>
                        </div>
                        <div>2成人0儿童</div>
                        <van-button round type="info" size="large">查询</van-button>
                    </van-tab>


                </van-tabs></van-tab>
            <van-tab title="行程设计" class="design">
                <div class="strokeDesign">
                    <span>
                        <van-icon name="location-o" />
                        <span>北京出发</span>
                        <van-icon name="arrow-down" />
                    </span>
                    <span>
                        <span class="strokeDesign-destiny">选择目的地</span>
                        <van-icon name="arrow-down" />
                    </span>
                </div>
                <div class="author">
                    <van-icon name="passed" color="#1989fa" />
                    <span>我已阅读并同意</span>
                    <span style="color: #1989fa;">《定制游个人信息授权》</span>
                </div>
                <div class="design-btn">
                    <van-button plain type="info" size="normal" icon="chat-o" style="border-radius: 15px;">在线沟通</van-button>
                    <van-button plain type="info" size="normal" icon="phone" style="border-radius: 15px;">电话沟通</van-button>
                </div>
                <div class="design-dingzhi">
                    <span><van-icon name="description-o" />
                        <span>我的定制单</span></span>
                    <span><van-icon name="arrow" /></span>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeq: '',
            activew: '',
        }
    },
}
</script>

<style scoped lang="scss">
.main {
    margin-top: 10px;
    margin: 10px;
    padding: 0 10px 10px 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);



    .lucheng {
        height: 40px;
        font-size: 20px;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        color: #ccc;
    }

    .design>div {
        height: 40px;
        margin-top: 20px;
    }

    .author {
        margin-left: 10px;
    }

    .design-btn {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;

    }

    .strokeDesign {
        font-size: 20px;
        display: flex;
        justify-content: space-around;

        .strokeDesign-destiny {
            color: #ccc;
        }
    }

    .design-dingzhi {
        margin: 10px;
        display: flex;
        justify-content: space-between;


    }
}
</style>